<template>
    <div id="searchResult">
        <van-list v-model="loading" :finished="finished"   @load="listRoll" :offset="offset" :immediate-check="isCheck">
            <div v-for="(item,index) in listdata" :key="index">
                <div class="groupbox" @click="goDetails(item.id)">
                    <img class="flowimg" v-show="item.is_bond==1 && lang =='zh'" src="http://img.xianyufanshen.net//index/bao@2x.png" alt="保证金协议">
                    <img class="flowimg" v-show="item.is_bond==1 && lang =='en'" src="http://img.xianyufanshen.net//index/bao_english@2x.png" alt="">
                    <img :src="item.head_img" alt="">
                    <div class="txtbox">
                        <p>{{item.title}}</p>
                    </div>
                    <div class="price">￥{{item.price}}</div>
                </div>
            </div>
        </van-list>
        <div v-if="finished && total==0 " class="zanwubox">
            <img src="http://img.xianyufanshen.net//search/zanwuxiangguancangpin@2x.png" alt="暂无搜索结果">
            <p class="zanwu" v-show="lang=='zh'">抱歉，暂未搜索到相关藏品~</p>
            <p class="zanwu" v-show="lang=='en'">Sorry, I haven't searched the collection yet~</p>
        </div>
    </div>
</template>
<script>
import { getGoodList} from "@/api/search"
import {Toast,List} from 'vant';
export default {
    name:'searchResult',
    //声明组件
    components:{
        [Toast.name]:Toast,
        [List.name]:List,
    },
    data (){
        return{
            userId:0,
            lang:'zh',
            catagrayId:0,//分类ID
            listdata:[], //获取的列表内容
            total:0,//总条数
            pageIndex:1,
            pageSize:10,
            offset:50,
            loading: false,//是否正在加载
            finished: false,//是否加载完整
            isCheck:false,//是否一开始检查滚动
            dataLength:0,//数据listData长度
            list:[],//搜索结果列表
        }
    },
    //实例创建完成后被立即调用
    created (){
        //获取用户ID
        this.getUserId();
        //获取语言环境
        this.getLang();
        //获取具体分类的三级目录id
        this.getId();
    },
    //监听
    watch:{

    },
    //计算属性
    computed:{

    },
    //
    methods:{
        //获取用户ID
    	getUserId(){
            if(this.$route.query.userId && this.$route.query.userId > 0){
    			this.userId = this.$route.query.userId;
    		}else{
                //获取缓存内的用户ID
                this.userId = window.localStorage.getItem("userId");
            }
        },
        //获取语言环境
         getLang(){
            if(this.$route.query.lang){
    			this.lang = this.$route.query.lang;
    		}
        },
        //获取分类ID
        getId(){
            if(this.$route.query.id){
                this.catagrayId = this.$route.query.id;
                this.getList();
    		}else{
                if(this.lang == "zh")
                    Toast("获取失败，请重试")
                else Toast("Failed to retrieve. Please try again.")
            }
        },
        getList(){
            getGoodList(this.catagrayId,this.pageIndex,this.pageSize,this.lang).then(res=>{
				if(res.code==200){
                   if(res.data.total > 0){
                       this.total = res.data.total;
						var list = res.data.list;
                        this.listdata = this.listdata.concat(list);
                        console.log(this.listdata)
						this.loading = false;
					}else{
						this.finished = true;
						this.loading = false;
					}
					if(this.pageIndex == 1 && res.data.total < this.pageSize){
						this.finished = true;
                        this.loading = false;
                    }else if(this.total == this.listdata.length){
                        this.finished = true;
                        this.loading = false;
                    }
                }else{
                    Toast(res.msg)
                }
            });
        },
        //滚动加载数据
        listRoll() {
            let _this = this;
            _this.pageIndex++;
            _this.getList();
        },
         //跳转到详情
        goDetails(id){
            let para = {};
            para.id = id;//藏品详情详情id (返回首页 此参数没有)
            para.linkType = "goodsDetail";
            para.lang = this.lang;//显示网页语言类型 zh中文 en英文
            para.rightBtn = "发布藏品"; //标题栏右上角按钮文字 没有该参数代表右上角没有东西
            // para.HideFootBar = false; //隐藏底部操作按钮 没有该参数代表不隐藏
            this.interaction.hLinkToApp(para);	
        },
    }
    
}
</script>

<style lang="stylus" scoped>
*{
    box-sizing :border-box;
}
#searchResult{
    width :100%;
    height :100%;
    background-color :#fff;
    padding :.133333rem 0;
    .van-list{
        background-color :#fff; 
         overflow: hidden;
          padding :.133333rem 0;
    }
    .groupbox{
        width :48%;
        height :6.826667rem;
        border : .026667rem solid #f1f1f1;
        margin-left :.133333rem;
        margin-bottom :.133333rem;
        float :left;
        position :relative;
        img {
            width :100%;
            height :4.8rem;
        }
        .flowimg{
            width :1.093333rem;
            height :.56rem;
            position :absolute;
            top:0;
            left :0;
        }
        .txtbox{
            width :100%;
            height 1.28rem;
            padding :.16rem 0;
            text-align :center;
            p{
                padding :0 .213333rem;;
                width :100%;
                height :.96rem;
                line-height :.48rem;
                overflow: hidden;
                text-overflow: ellipsis;
                display: -webkit-box;
                -webkit-line-clamp: 2;
                -webkit-box-orient: vertical;
                font-family:PingFangSC-Medium;
                font-size:.346667rem;
                color:#494949;
                letter-spacing:.0048rem;
                text-align:left;
            }
        }
        .price{
            padding :0 .213333rem;
            font-family:PingFangSC-Medium;
            font-size:.32rem;
            color:#cb9c57;
            letter-spacing:.005333rem;
            text-align:left;
        }
    }
    .zanwubox{
        width :100%;
        hie:100%;
        text-align :center;
        padding-top :4.666667rem;
        img{
            width :3.226667rem;
            height :3.226667rem;
            margin :0 auto;
            vertical-align :middle;
        }
        .zanwu{
            margin-top :.4rem;
            font-family:PingFangSC-Regular;
            font-size:.346667rem;
            color:#a2a2a2;
            letter-spacing:.0048rem;
            text-align:center;
        }
    }
    
}
</style>


